<template>
  <view class="return_ticket">
    <!-- 头部提示文案 -->
    <view class="header">选择乘车人</view>
    <!-- 乘客选择列表 -->
    <view class="list">
      <checkbox-group @change="allCheckChange">
        <label class="item">
          <view class="item_selector item_selector_all"
            ><checkbox :value="allChecked.value" :checked="allChecked.checked"
          /></view>
          <view class="item_content"><view class="all">全选</view></view>
        </label>
      </checkbox-group>
      <checkbox-group @change="checkboxChange">
        <label class="item" v-for="item in passengerList" :key="item.certNo">
          <view class="item_selector"
            ><checkbox :value="item.passenger.certNo" :checked="item.checked"
          /></view>
          <view class="item_content">
            <view class="top">
              <text class="name">{{ item.passenger.name || "" }}</text>
              <text class="type">{{
                item.passenger.passengerType | formatTicketType
              }}</text>
              <view class="price">{{ item.price }}</view>
            </view>
            <view class="bottom">
              <view class="cert_no"
                >身份证:{{ item.passenger.certNo | formatCertNo }}</view
              >
              <view class="phone">手机号:{{ item.passenger.phone }}</view>
            </view>
          </view>
        </label>
      </checkbox-group>
      <view class="item">
        <view class="total">
          <view class="sum">
            共计
            <text class="sum_text">{{ sum }}</text>
            张
          </view>
          <view class="amount">
            退款金额:
            <text class="amount_text1">￥</text>
            <text class="amount_text2">{{ amount }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 退票原因方式 -->
    <view class="correlation">
      <uni-list>
        <uni-list-item
          title="退票原因"
          :rightText="reasons[currentReason].name"
          @click="selectReason"
        ></uni-list-item>
        <uni-list-item
          title="退款方式"
          rightText="原路退回(1-3个工作日退回原支付账户)"
          :show-arrow="false"
        ></uni-list-item>
      </uni-list>
    </view>
    <!-- 提交按钮 -->
    <view class="btn_wraper" @click="submit"
      ><view class="btn_text">立即提交</view></view
    >
    <!-- 退款原因popup -->
    <uni-popup ref="popup" type="bottom">
      <view class="reason">
        <view class="title">
          <view class="goback"
            ><uni-icons
              @click="closePopup"
              class=""
              type="arrowleft"
              size="20"
              color="#333333"
            ></uni-icons
          ></view>
          退款原因
        </view>
        <view class="radio_list">
          <radio-group @change="radioChange">
            <label
              class="radio_list_item"
              v-for="(item, index) in reasons"
              :class="{ 'radio_list_item--active': index == currentReason }"
              :key="item.value"
            >
              <view class="reason_text">{{ item.name }}</view>
              <view class="reason_sel"
                ><radio :value="item.value" :checked="index === currentReason"
              /></view>
            </label>
          </radio-group>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import uniList from "@dcloudio/uni-ui/lib/uni-list/uni-list.vue";
import uniListItem from "@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue";
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
// api
import { $ordersClose, $orderslosePart } from "../../service/index";
// utils
import { myShowToast, myShowModal } from "../../utils/utils.js";
export default {
  components: { uniList, uniListItem, uniPopup, uniIcons },
  data() {
    return {
      allChecked: {
        value: "allChecked",
        checked: false,
      }, // 全选/反选
      passengerList: [
        // {
        // 	name: '向健伟',
        // 	certType: '成人票',
        // 	certNo: '4208 **** **** 8118',
        // 	phone: '173 **** 1707',
        // 	price: '86'
        // },
      ], // 乘车人列表
      sum: 0, // 总计几张
      amount: 0, // 金额
      reasons: [
        {
          value: "0",
          name: "出行变更，购买其他车票",
          checked: "true",
        },
        {
          value: "1",
          name: "不想购买",
        },
        {
          value: "2",
          name: "购买错误，重新购买",
        },
      ],
      currentReason: 0,
    };
  },
  computed: {
    ...mapState(["info", "orderDetail"]),
  },
  filters: {
    formatTicketType(val) {
      const types = {
        ADULT: "成人票",
        CHILD: "儿童票",
        STUDENT: "学生票",
        SOLDIER: "军人票",
      };
      return types[val] || "未知";
    },
    formatCertNo(val) {
      const len = val.length;
      return val.substring(0, 4) + " **** **** " + val.substring(len - 4, len);
    },
  },
  watch: {},
  methods: {
    // 全选或者反选 checkbox
    allCheckChange(e) {
      if (e.detail.value.length == 0) {
        this.passengerList.map((item) => this.$set(item, "checked", false));
        this.$set(this.allChecked, "checked", false);
        this.sum = 0; // 票数重置
        this.amount = 0; // 金额重置
      } else {
        let amount = 0;
        this.passengerList.map((item) => {
          this.$set(item, "checked", true);
          amount += Number(item.price || 0);
        });
        this.$set(this.allChecked, "checked", true);
        this.sum = this.passengerList.length;
        this.amount = amount;
      }
    },
    // list checkbox
    checkboxChange(e) {
      let items = this.passengerList,
        values = e.detail.value,
        sum = 0, // 票数
        amount = 0; // 总金额
      let valuesLen = values.length;
      for (let i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i];
        if (values.includes(item.passenger.certNo)) {
          this.$set(item, "checked", true);
        } else {
          this.$set(item, "checked", false);
        }
      }
      this.sum = valuesLen; // 总数
      for (let j = 0; j < valuesLen; j++) {
        const item = items.find((item) => {
          return item.passenger.certNo == values[j];
        });
        amount += Number(item.price || 0);
      }
      this.amount = amount;
      this.$set(this.allChecked, "checked", items.length == valuesLen);
    },
    // 选择原因弹窗
    selectReason() {
      this.$refs.popup.open();
    },
    // 关闭选择弹窗
    closePopup() {
      this.$refs.popup.close();
    },
    // 退款原因
    radioChange(e) {
      const reasons = this.reasons;
      const len = reasons.length;
      for (let i = 0; i < len; i++) {
        if (reasons[i].value === e.target.value) {
          this.currentReason = i;
          break;
        }
      }
    },
    // 提交退款
    submit() {
      const allChecked = this.allChecked.checked;
      const id = this.orderDetail.id;
      if (allChecked) {
        // 全选 直接全部退票退款接口
        const params = {
          tickets: this.passengerList,
          id,
        };
        console.log(params.tickets);

        this.orderslosePart(params);
      } else {
        // 部分退  部分退票接口
        const passengerList = this.passengerList;
        let tickets = [];
        tickets = passengerList.filter((item) => {
          return !!item.checked;
        });
        const params = {
          tickets,
          id,
        };
        tickets.length && this.orderslosePart(params);
      }
    },
    // 关闭订单并退票 全退
    ordersClose(id) {
      $ordersClose({}, id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          myShowToast("退票成功");
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  部分退
    orderslosePart(params) {
      $orderslosePart({ tickets: params.tickets }, params.id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          myShowToast("部分退票成功");
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  onLoad() {
    const orderDetail = this.orderDetail;
    console.log(orderDetail.tickets);
    let temp = orderDetail.tickets;
    temp = temp.filter((i) => {
      return i.status != "REFUNDED";
    });
    this.passengerList = temp || []; // 订单乘车人
  },
};
</script>

<style lang="scss" scoped>
.return_ticket {
  .header {
    height: 80rpx;
    line-height: 80rpx;
    background: rgba(244, 246, 249, 1);
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(139, 150, 172, 1);
    padding-left: 40rpx;
  }
  .list {
    .item {
      display: block;
      padding-left: 40rpx;
      .item_selector {
        display: inline-block;
        margin-right: 36rpx;
        vertical-align: 54rpx;
      }
      .item_selector_all {
        vertical-align: 0;
      }
      .item_content {
        display: inline-block;
        border-bottom: 2rpx solid #d1d7e1;
        width: 638rpx;
        .all {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding: 42rpx 0;
        }
        .top {
          padding: 39rpx 0 14rpx 0;
          .name {
            font-size: 28rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            margin-right: 29rpx;
          }
          .type {
            height: 28rpx;
            line-height: 28rpx;
            display: inline-block;
            border: 1rpx solid rgba(130, 141, 162, 1);
            border-radius: 4rpx;
            font-size: 20rpx;
            padding: 0 7rpx;
            font-weight: 500;
            color: rgba(130, 141, 162, 1);
            vertical-align: 2rpx;
          }
          .price {
            display: inline-block;
            width: 65%;
            text-align: right;
          }
        }
        .bottom {
          padding-bottom: 39rpx;
          .cert_no {
            display: inline-block;
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(139, 150, 172, 1);
            margin-right: 46rpx;
          }
          .phone {
            display: inline-block;
            font-size: 20rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(139, 150, 172, 1);
          }
        }
      }
      .total {
        padding: 50rpx 40rpx 33rpx 72rpx;
        display: flex;
        justify-content: space-between;
        .sum,
        .amount {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
        }
        .sum {
          .sum_text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
          }
        }
        .amount {
          .amount_text1,
          .amount_text2 {
            font-weight: bold;
            color: rgba(254, 112, 42, 1);
          }
          .amount_text1 {
            font-size: 24rpx;
          }
          .amount_text {
            font-size: 32rpx;
          }
        }
      }
    }
  }
  .correlation {
    border-top: 20rpx solid #f4f6f9;
    border-bottom: 2rpx solid #d1d7e1;
  }
  .btn_wraper {
    margin: 68rpx auto;
  }
  .reason {
    background-color: #ffffff;
    min-height: 30vh;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .title {
      height: 108rpx;
      line-height: 108rpx;
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      color: #333333;
      position: relative;
      .goback {
        position: absolute;
        top: 0;
        left: 40rpx;
      }
    }
    .radio_list {
      .radio_list_item {
        display: flex;
        justify-content: space-between;
        height: 104rpx;
        line-height: 104rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        padding: 0 40rpx;
      }
      .radio_list_item--active {
        background-color: #f4f6f9;
        color: #1966ff;
      }
      /* 微信下的radio样式 */
      /deep/ radio .wx-radio-input {
        border-radius: 50%;
        width: 20px;
        height: 20px;
      }
      /deep/ radio .wx-radio-input.wx-radio-input-checked {
        border-color: #1966ff !important;
        background: #ffffff !important;
      }
      /deep/ radio .wx-radio-input.wx-radio-input-checked::before {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 15px;
        color: #1966ff;
        background: transparent;
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
      }
    }
  }
}
</style>
